<template>
    <div class="luyong-container">
        <!-- 顶部操作栏 -->
        <div class="operation-bar no-print">
            <div class="left-actions">
                <el-button icon="el-icon-back" @click="goBack">返回</el-button>
            </div>
            <div class="right-actions">
                <el-button type="primary" icon="el-icon-document-add" @click="saveData">保存</el-button>
                <el-button type="success" icon="el-icon-menu" @click="goToList">列表</el-button>
                <el-button type="info" icon="el-icon-printer" @click="printToPDF">打印</el-button>
            </div>
        </div>

        <!-- 通知书内容 -->
        <div class="content-wrapper">
            <div class="offer-notice" id="printArea">
                <h2 class="notice-title">录用通知书</h2>
                <p>
                    <input v-model="formData.applicantName" :disabled="isViewMode" class="inline-input">
                    先生/小姐：
                </p>
                <p>您好！首先感谢您对本公司的信任和支持。</p>
                <p>非常荣幸的通知您，根据我公司的需要以及对您各项基本情况的审查和考核，决定录用您为本公司员工，部门：
                    <input v-model="formData.deptName" :disabled="isViewMode" class="inline-input">
                    部，岗位：<input v-model="formData.positionName" :disabled="isViewMode" class="inline-input">，
                    请您于
                    <el-date-picker v-model="reportDate" type="date" :disabled="isViewMode" value-format="yyyy-MM-dd"
                        class="date-picker">
                    </el-date-picker>
                    <el-time-picker v-model="formData.reportTime" :disabled="isViewMode" value-format="HH:mm"
                        format="HH:mm" class="time-picker">
                    </el-time-picker>
                    时到招聘组报到，如有特殊情况，不能按时报到，请您在一个工作日内与招聘组联系，否则视为自动放弃。
                </p>
                <p>在此，欢迎您加入
                    <input :style="{ width: formData.companyName.length + 'ch', minWidth: '80px' }"
                        v-model="formData.companyName" :disabled="isViewMode" class="inline-input-lg">
                    公司！报到时请提供以下入职资料：
                </p>
                <ol class="requirements-list">
                    <li>身份证原件及复印件二张、学历证原件其他相关证书的原件及复印件各一份；</li>
                    <li>原单位离职证明（如不能提供的，需本人签署未在其他企业任职的书面声明）；</li>
                    <li>近三个月内合格的体检证明（体检表或健康证）原件及复印件一份；</li>
                    <li>一寸免冠彩照三张。</li>
                    <li>住房公积金卡复印件或帐号（仅限于在原单位有购买住房公积金人员）。</li>
                    <li>如没有社保卡的人员，请提供社保专用照片回执单一份。</li>
                    <li>
                        <input v-model="formData.bankCard" :disabled="isViewMode" class="inline-input-lg">
                        银行卡复印件一份。
                    </li>
                    <li>因公司采用银行卡发放工资，系统汇算，汇算完成后核算、签批等一系列流程均需花费较长时间，操作起来也较为繁锁。为了明确薪资的发放时间，经双方协商一致，确立公司发薪日定为每月20日，如遇节假日或特殊情况则相应推迟或顺延。
                    </li>
                </ol>
                <!-- <p></p> -->
                <p>注：1.报到时请携带此《录用通知书》。</p>
                <p>2.本录用通知书在签订劳动合同后不再发生法律效力，双方的权利和义务以劳动合同的约定的条款为准。</p>
                <p>3.此录用通知书的有效期为：
                    <el-date-picker v-model="validStartDate" type="date" :disabled="isViewMode"
                        value-format="yyyy-MM-dd" class="date-picker">
                    </el-date-picker>
                    至
                    <el-date-picker v-model="validEndDate" type="date" :disabled="isViewMode" value-format="yyyy-MM-dd"
                        class="date-picker">
                    </el-date-picker>
                </p>
                <p>4.当出现下列情形之一时，本录用通知书自动失效：</p>
                <ul class="invalid-conditions">
                    <li>①不具备政府规定的就业手续的；②与原单位未依法解除、终止劳动合同的；③与原单位存在竞业限制约定且本公司在限制范围之内的；④应聘时提供个人简历、学历、职称等系不真实的；⑤无法提供办理录用、社会保险等所需要的证明材料的；⑥其他不诚信的行为等；
                    </li>
                </ul>
                <p>本人确认已清楚了解以上信息，并同意遵照执行：
                    <input v-model="formData.confirmation" :disabled="isViewMode" class="inline-input-lg">
                </p>
                <p>公司地址：深圳市宝安区沙井街道和一村兴业西路裕达富工业园</p>
                <div class="contact-info">
                    <p>联系人：
                        <input v-model="formData.contactPerson" :disabled="isViewMode" class="inline-input">
                        <span class="phone-number">联系电话：0755-33866888</span>
                    </p>
                </div>
                <div class="signature-section">
                    <p><span class="company-name">{{ formData.companyName }}</span>公司</p>
                    <p>企管部</p>
                    <p>
                        <el-date-picker v-model="noticeDate" type="date" :disabled="isViewMode"
                            value-format="yyyy-MM-dd" class="date-picker">
                        </el-date-picker>
                    </p>
                </div>
                <div class="form-footer">
                    <span>表单编号及版本：AM-JY-010 A/3</span>
                    <span>保存期限：长期</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { saveOrUpdateApi, getInfoApi } from '@/api/luyong'
import { Message } from 'element-ui'
import { formatDate, DATE_FORMAT } from '@/utils/date'

export default {
    data() {
        return {
            mode: 'edit',
            noticeId: null,
            formData: {
                id: null,
                applicantName: '',
                deptName: '',
                positionName: '',
                reportTime: '',
                companyName: '',
                bankCard: '',
                confirmation: '',
                contactPerson: ''
            },
            reportDate: null,
            validStartDate: null,
            validEndDate: null,
            noticeDate: null
        };
    },
    computed: {
        isViewMode() {
            return this.mode === 'view'
        }
    },
    created() {
        // 从路由参数获取模式和ID
        const { mode, id } = this.$route.query
        if (mode) {
            this.mode = mode
        }
        if (id) {
            this.noticeId = id
            this.getNoticeData()
        }
    },
    methods: {
        async getNoticeData() {
            try {
                const data = await getInfoApi(this.noticeId)
                if (data.data) {
                    const noticeData = data.data.data;
                    this.formData = {
                        ...noticeData,
                    },
                    this.reportDate = formatDate(noticeData.reportDate, DATE_FORMAT.date)
                    // this.reportTime = formatDate(noticeData.reportDate, DATE_FORMAT.shortTime)
                    // this.validStartDate = formatDate(noticeData.validStartDate, DATE_FORMAT.datetime)
                    // this.validEndDate = formatDate(noticeData.validEndDate, DATE_FORMAT.datetime)
                    this.noticeDate = formatDate(noticeData.noticeDate, DATE_FORMAT.date)
                }
            } catch (error) {
                console.error('获取通知书详情失败：', error)
            }
        },
        resetForm() {
            this.formData = {
                id: null,
                applicantName: '',
                deptName: '',
                positionName: '',
                reportTime: '',
                companyName: '',
                bankCard: '',
                confirmation: '',
                contactPerson: ''
            }
            this.reportDate = null
            this.validStartDate = null
            this.validEndDate = null
            this.noticeDate = null
        },
        validateForm() {
            if (!this.formData.applicantName) {
                Message.warning('请输入应聘者姓名')
                return false
            }
            if (!this.formData.deptName) {
                Message.warning('请输入部门名称')
                return false
            }
            if (!this.formData.positionName) {
                Message.warning('请输入岗位名称')
                return false
            }
            if (!this.reportDate || !this.formData.reportTime) {
                Message.warning('请选择报到日期和时间')
                return false
            }
            if (!this.formData.companyName) {
                Message.warning('请输入公司名称')
                return false
            }
            if (!this.validStartDate || !this.validEndDate) {
                Message.warning('请选择有效期')
                return false
            }
            return true
        },
        async saveData() {
            if (!this.validateForm()) {
                return Promise.reject('表单验证失败')
            }

            const saveData = {
                ...this.formData,
                reportDate: formatDate(this.reportDate, DATE_FORMAT.date),
                // reportTime: formatDate(this.reportDate, DATE_FORMAT.shortTime),
                validStartDate: formatDate(this.validStartDate, DATE_FORMAT.datetime),
                validEndDate: formatDate(this.validEndDate, DATE_FORMAT.datetime),
                noticeDate: formatDate(this.noticeDate, DATE_FORMAT.date)
            }

            try {
                await saveOrUpdateApi(saveData)
                Message.success('保存成功')
                // this.goToList()
                return Promise.resolve()
            } catch (error) {
                console.error('保存失败：', error)
                return Promise.reject(error)
            }
        },
        printToPDF() {
            window.print()
        },
        goToList() {
            this.$router.push('/main/renshi/zhaoping/luyongtzs/luyongtzsList').catch(err => {
                if (err.name !== 'NavigationDuplicated') {
                    throw err
                }
            })
        },
        goBack() {
            this.$router.push('/main/biao')
        }
    }
};
</script>

<style scoped lang="scss">
.luyong-container {
    min-height: 100vh;
    /* background-color: #f5f7fa; */
    padding: 20px;
    width: 1200px;
    margin: 0 auto;
}

.operation-bar {
    background-color: white;
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.right-actions .el-button {
    margin-left: 10px;
}

.content-wrapper {
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 30px;
}

.offer-notice {
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.8;
    color: #333;
    text-align: center;
}

.notice-title {
    text-align: center;
    font-size: 24px;
    margin: 0 0 30px;
    font-weight: bold;
}

.inline-input {
    width: 120px;
    margin: 0 5px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.inline-input-lg {
    width: 200px;
    margin: 0 5px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.date-picker,
.time-picker {
    width: 150px;
    margin: 0 5px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

p {
    margin: 16px 0;
    line-height: 1.8;
    text-align: left;
}

.requirements-list {
    margin: 0px auto;
    padding-left: 20px;
    display: inline-block;
    text-align: left;
}

.requirements-list li {
    margin: 10px 0;
    text-indent: 0;
    text-align: left;
}

.invalid-conditions {
    margin: 10px auto;
    padding-left: 40px;
    list-style: none;
    display: inline-block;
    text-align: left;
}

.contact-info {
    margin: 20px auto;
    text-align: center;
}

.phone-number {
    margin-left: 40px;
    text-decoration: underline;
}

.signature-section {
    text-align: right;
    margin: 30px auto;

    p {
        text-align: end;
    }
}

.company-name {
    text-decoration: underline;
    margin-right: 5px;
}

.form-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    color: #909399;
    font-size: 12px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

input {
    border: none;
    border-bottom: 1px solid #dcdfe6;
    padding: 4px 8px;
    font-size: inherit;
    color: inherit;
    background: transparent;
    transition: all 0.3s ease;
    min-width: 80px;

    &:hover,
    &:focus {
        border-color: #409EFF;
        outline: none;
    }

    &::placeholder {
        color: #c0c4cc;
    }

    &[type="date"],
    &[type="time"] {
        min-width: 100px;
    }
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
    .luyong-container {
        padding: 10px;
    }

    .content-wrapper {
        padding: 15px;
    }

    .operation-bar {
        flex-direction: column;
        gap: 10px;
    }

    .right-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .right-actions .el-button {
        margin-left: 0;
    }

    .inline-input,
    .inline-input-lg,
    .date-picker,
    .time-picker {
        width: 100%;
        margin: 5px 0;
    }
}

/* 添加打印样式 */
@media print {
    .no-print {
        display: none;
    }

    .luyong-container {
        padding: 0;
        background-color: white;
    }

    .content-wrapper {
        padding: 0;
        box-shadow: none;
    }

    .offer-notice {
        max-width: none;
    }

    /* 隐藏输入框边框 */
    .input__inner {
        border: none;
        background-color: transparent;
        padding: 0;
        min-height: 20px;
        height: 20px;
        line-height: 20px;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        top: -2px;
    }

    .el-date-editor .input__inner,
    .el-time-picker .input__inner {
        width: auto;
        min-width: 80px;
    }

    /* A4纸张设置 */
    @page {
        size: A4;
        margin: 2cm;
    }

    /* 确保分页时不会切断内容 */
    p,
    .requirements-list li {
        page-break-inside: avoid;
    }

    /* 移除输入框和日期选择器的hover效果 */
    .input:hover,
    .el-date-editor:hover {
        box-shadow: none;
    }

    /* 优化签名区域在打印时的显示 */
    .signature-section {
        margin: 50px 0 30px;
    }

    /* 确保页脚始终在底部 */
    .form-footer {
        position: fixed;
        bottom: 2cm;
        left: 2cm;
        right: 2cm;
    }

    ::v-deep .el-form-item {
        margin-left: 0px;
    }
}
</style>